<template>
  <div>
    <el-button @click="handleDownload">下载表格</el-button>
    <MaxTable
      :tableList="tableData"
      :tableHeadConfig="column"
      selection
      index
      border
      :rowClassName="rowClassName"
      :cellClickFn="cellClickFn"
      :rowIndex="initIndex"
      @costomerNameFn="costomerNameFn"
      @rowClick="rowClick"
    >
      <el-table-column
        slot="operation"
        label="操作"
        min-width="50"
      >
        <template slot-scope="scope">
          <div>
            <el-button type="danger">删除</el-button>
            <el-button type="primary">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </MaxTable>
  </div>
</template>

<script>
import axios from 'axios'
import MaxTable from '@/components/MaxTable'
export default {
  name: 'WorkspaceJsonIndex',
  components: {
    MaxTable
  },

  data() {
    return {
      //传入数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        id: 1,

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        id: 2
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        id: 3
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        id: 4
      }],
      //表头展示
      column: [
        {
          prop: "date",
          label: '日期',
          minWidth: '100',
          align: "center",
          isSorted: "costom"
        }, {
          prop: "name",
          label: "姓名",
          width: "200"
        },
        {
          prop: "address",
          label: "地址",
          width: "300",
        },
        {
          label: "操作",
          slot: "operation"
        }
      ],
      //时候显示序列号
      index: true,
      //是否显示多选框
      selection: true,
      //时候显示边框
      border: true,
      //给某一行添加样式  
      rowClassName: [
        {
          index: 1,
          rowClass: "red"
        }
      ],
      //给单元格添加事件
      cellClickFn: [
        {
          name: "姓名",
          columnCall: "costomerNameFn"
        }
      ],
      initIndex: -1,//默认索引

    };
  },

  mounted() {

  },

  methods: {
    costomerNameFn(row) {
      console.log(1, row)
    },
    //点击某一行触发的事件
    rowClick(row) {
      console.log(2, row)
      this.initIndex = this.tableData.findIndex(item => item.id === row.id)
      console.log(this.initIndex)
      this.rowClassName.splice(0, 1, {
        index: this.initIndex,
        rowClass: "red"
      })
    },
    //下载表格
    handleDownload() {
      axios.get("@/assets/404_images/404.png").then(res => {
        console.log(res)
      })
    },

  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__row.red{
	background-color:pink;
	cursor: pointer;
}
</style>